<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery操作DOM</title>
        <!-- JQueryscprit:核心语法+DOM（针对页面操作）+BOM(针对浏览器)
         学习主体：针对页面操作比较多---DOM操作
         JQuery操作DOM：理解：JQ框架改变页面内容效果
         js基础就可以直接学习，了解函数使用
         基础函数------事件源之后出现，事件源语法糖中
         html().            作用：增加一个元素，覆盖原有html
         val()              作用：针对input元素，实现修改文本框内容
         text()                作用：生成文本内容
         
         -->
         <script src="js/jquery-1.11.1.js"></script>
    </head>
    <body>
        <!-- 鼠标点击按钮，然后，下面 -->
        <button>按钮</button>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti asperiores adipisci fugit molestiae eos nemo, vitae illo sed, cupiditate dolor facilis, aspernatur blanditiis natus dolore laudantium odit nostrum modi nihil!</p >
        <script>
            $("button").click(function){
                /* JQ操作DOM--html()函数使用 */
                $("p").html("<h1>JQ操作DOM-html函数使用</h1>");
            }    );
            
        </script>

    </body>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: black;
        }
    </style>
</html>